<script setup lang="ts">
import WatchMoreComp from "./WatchMoreComp.vue";
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import type { watchArrType ,bannersArrType } from "@/boyTypings";
// export default {
const router = useRouter()
const props = defineProps({
  boyUrl: String,
});

// data() {
//   return {
const bannersArr = ref<bannersArrType[]>([]);
const heavyRecommendation = ref(<watchArrType>{});
const weekHot = ref(<watchArrType>{});
const readerLike = ref(<watchArrType>{});
const niceRecommendation = ref(<watchArrType>{});

//   };
// },
// methods: {
const getData = () => {
  axios
    .get(`https://apis.netstart.cn/yunyuedu${props.boyUrl}`)
    .then(({ data: { data } }) => {
      bannersArr.value = data.list[0].banners;
      heavyRecommendation.value = data.list[1];
      weekHot.value = data.list[2];
      readerLike.value = data.list[3];
      niceRecommendation.value = data.list[4];
    });
};
const swipeToBook = (id: any, title: any) => {
  router.push(`/detile/${id}/${title}`);
};
// },

onMounted(() => {
  getData();
});
// };
</script>
<template>
  <div class="boy">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannersArr" :key="index">
        <img :src="item.cover" @click="swipeToBook(item.id, item.title)" />
      </van-swipe-item>
    </van-swipe>

    <WatchMoreComp :Arr="heavyRecommendation" />
    <WatchMoreComp :Arr="weekHot" />
    <WatchMoreComp :Arr="readerLike" />
    <WatchMoreComp :Arr="niceRecommendation" />
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.my-swipe .van-swipe-item {
  margin-top: 10px;

  img {
    width: 96vw;
    height: 200px;
    border-radius: 6px;
    margin-left: 2vw;
  }
}
</style>